<template>
  <gui-popup ref="guipopup" position="right" width="90vw">
    <!-- <gui-page :fullPage="true" :isLoading="pageLoading" ref="guiPage"> -->
      <view ref="guiPage" class="gui-flex1 gui-flex gui-columns gui-bg-white">
        <!-- 搜索组件 -->
        <view class="gui-city-search gui-bg-gray" id="hSearch">
          <gui-search @clear="search" @inputting="search"></gui-search>
        </view>
        <view class="gui-padding gui-margin-top">
          <text class="gui-h6 gui-block-text gui-primary-color"
            >当前城市 : {{ currentCity }}</text
          >
        </view>
        <!-- 城市列表 -->
        <scroll-view
          :scroll-y="true"
          :scroll-into-view="showCityId"
          :scroll-with-animation="true"
          class="height"
        >
          <view class="gui-padding" id="pageTop">
            <text
              class="gui-h6 gui-block-text gui-primary-color"
              style="padding-bottom: 10rpx"
              >热门城市</text
            >
            <view
              class="gui-flex gui-rows gui-wrap gui-space-between"
              style="padding-bottom: 10rpx; padding-right: 30rpx"
            >
              <text
                class="hotcity-item gui-block-text"
                v-for="(item, index) in hotCities"
                :key="index"
                :data-cityname="item.name"
                :data-citycode="item.code"
                @tap="chooseCity"
                >{{ item.name }}</text
              >
            </view>
            <block v-for="(cities, index) in cityData" :key="index">
              <text class="gui-city-AZ gui-block-text" :id="'gui-city-AZ-' + index">{{
                index
              }}</text>
              <text
                class="city-item gui-block-text gui-border-b"
                :id="'gui-city-list-' + city.code"
                v-for="(city, cindex) in cities"
                :key="cindex"
                :data-cityname="city.name"
                :data-citycode="city.code"
                @tap="chooseCity"
                >{{ city.name }}</text
              >
            </block>
          </view>
        </scroll-view>
        <view class="gui-city-AZ-right">
          <text
            class="gui-city-AZ-right-item gui-block-text gui-transition-all"
            v-for="(char, index) in AZ"
            :key="index"
            :class="[
              rightTapIdx == index ? 'gui-bg-black' : '',
              rightTapIdx == index ? 'gui-color-white' : '',
            ]"
            :data-char="char"
            :data-idx="index"
            @tap="changAZ"
            >{{ char }}</text
          >
        </view>
      </view>
    <!-- </gui-page> -->
  </gui-popup>
</template>
<script>
var dataObj = require("@/components/ui/data/cityData.js");
export default {
  data() {
    return {
      // 全屏 loading
      pageLoading: true,
      // 核心区域高度
      mainHeight: 200,
      cityData: dataObj.cityData,
      AZ: dataObj.AZ,
      currentCity: "北京市",
      hotCities: [
        { code: 110000, name: "北京市" },
        { code: 310000, name: "上海市" },
        { code: 330100, name: "杭州市" },
        { code: 610100, name: "西安市" },
        { code: 120000, name: "天津市" },
        { code: 340200, name: "芜湖市" },
      ],
      showCityId: "",
      searchTimer: null,
      searchIndex: -1,
      rightTapIdx: -1,
      bsId:''
    };
  },
  onLoad: function () {
    // 计算页面主体高度
    // this.$uni.getRefs("guiPage", this, 0, (ref) => {
    //   ref.getDomSize("guiPage", (e) => {
    //     this.mainHeight = e.height - uni.upx2px(120);
    //     // this.pageLoading = false;
    //   });
    // });
  },
  methods: {
    show(id){
        this.bsId = id;
        this.$refs.guipopup.open();
    },
    // 选择
    chooseCity: function (e) {
      // 数据保存在 cityname 和 citycode
      var cityname = e.currentTarget.dataset.cityname;
      var citycode = e.currentTarget.dataset.citycode;
      uni.showToast({
        title: cityname + " [ " + citycode + " ]",
        icon: "none",
      });
      this.currentCity = cityname;
      this.$emit('city',{id:this.bsId,city:this.currentCity})
        this.$refs.guipopup.close();
    },
    // 搜索
    search: function (k) {
      k = k.toLowerCase();
      if (k == "") {
        this.showCityId = "pageTop";
        return;
      }
      if (this.searchTimer != null) {
        clearTimeout(this.searchTimer);
      }
      this.searchTimer = setTimeout(() => {
        this.searchBase(k);
      }, 500);
    },
    searchBase: function (k) {
      this.searchIndex = -1;
      for (var i in this.cityData) {
        for (var ii = 0; ii < this.cityData[i].length; ii++) {
          if (
            this.cityData[i][ii].name.indexOf(k) == 0 ||
            this.cityData[i][ii].pinyin.indexOf(k) == 0
          ) {
            this.searchIndex = this.cityData[i][ii].code;
            break;
          }
        }
        if (this.searchIndex != -1) {
          break;
        }
      }
      if (this.searchIndex != -1) {
        this.showCityId = "gui-city-list-" + this.searchIndex;
      }
    },
    // 点击切换
    changAZ: function (e) {
      this.rightTapIdx = -1;
      var char = e.currentTarget.dataset.char;
      this.showCityId = "gui-city-AZ-" + char;
      this.rightTapIdx = e.currentTarget.dataset.idx;
      setTimeout(() => {
        this.rightTapIdx = -1;
      }, 2000);
    },
  },
};
</script>
<style>
.height{
    height: calc(100vh - 120rpx);
}
.gui-h6 {
  line-height: 66rpx;
}
.gui-city-search {
  padding: 20rpx 100rpx;
}
.gui-city-AZ {
  font-weight: 700;
  line-height: 88rpx;
  font-size: 30rpx;
}
.gui-city-AZ-right {
  width: 50rpx;
  position: fixed;
  right: 0;
  top: 80px;
}
/* #ifdef H5 */
.gui-city-AZ-right {
  top: 110px;
}
/* #endif */
.gui-city-AZ-right-item {
  line-height: 38rpx;
  height: 38rpx;
  width: 38rpx;
  border-radius: 40rpx;
  font-size: 22rpx;
  text-align: center;
}
.hotcity-item {
  width: 210rpx;
  font-size: 26rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 10rpx;
  text-align: center;
  overflow: hidden;
  margin: 8rpx 5rpx;
  background-color: #f6f7f8;
}
.city-item {
  line-height: 88rpx;
  height: 88rpx;
  font-size: 26rpx;
}
</style>
